<script setup lang="ts">
// 导入echarts
import * as echarts from 'echarts';
import { ref, onMounted, defineProps } from 'vue';

// 获取传过来的数据
const { option } = defineProps(['option']);

// 获取dom元素
const chartsDom = ref();

onMounted(() => {
    const myChart = echarts.init(chartsDom.value);
    myChart.setOption(option);

    // echarts 监听页面大小
    window.addEventListener('resize', function () {
        myChart.resize();
    });
});
</script>

<template>
    <div class="chartsDom" ref="chartsDom"></div>
</template>


<style scoped>
.chartsDom {
    width: 35%;
    height: 80%;
    margin: 4% 0;
}
</style>